<form id="<?php echo $uniqid;?>" method="post">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF" style="display:none;">
            <td class="tlabel">配送方式：</td>
            <td width="80%">
                <template v-if="dataset.id>0">
                    <label style="margin-right:20px;" v-if="dataset.type=='express'">物流快递</label>
                    <label style="margin-right:20px;" v-if="dataset.type=='store'">商家配送</label>
                    <label style="margin-right:20px;" v-if="dataset.type=='selfetch'">到店/自提</label>
                    <label style="margin-right:20px;" v-if="dataset.type=='autosend'">自动发货</label>
                </template>
                <template v-else>
                    <label style="margin-right:20px;"><input name="type" type="radio" v-model="dataset.type"
                                                             value='express'>物流快递</label>
                    <label style="margin-right:20px;"><input name="type" type="radio" v-model="dataset.type" value='store'>商家配送</label>
                    <label style="margin-right:20px;"><input name="type" type="radio" v-model="dataset.type"
                                                             value='selfetch'>到店/自提</label>
                    <label style="margin-right:20px;"><input name="type" type="radio" v-model="dataset.type"
                                                             value='autosend'>自动发货</label>
                </template>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel">模板名称：</td>
            <td width="80%"><input type="text"
                                   class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                   placeholder="请输入模板名称.." v-model="dataset.name">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='express'">
            <td class="tlabel">计价方式：</td>
            <td width="80%">
                <label style="margin-right:20px;"><input type="radio" v-model="express_type" value='number'>按件数</label>
                <label><input type="radio" v-model="express_type" value='weight'>按重量</label>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='express'">
            <td colspan="2" style="padding:0;">
                <div class="detail-table">
                    <div class="detail-table-header">
                        <div style="flex: 1 1 0%;">
                            可配送区域
                        </div>
                        <div class="custom-item-with">
                            {{ express_type=='number' ? '首件' : '首重' }}
                        </div>
                        <div class="custom-item-with">
                            运费(元)
                        </div>
                        <div class="custom-item-with">
                            {{ express_type=='number' ? '续件' : '续重' }}
                        </div>
                        <div class="custom-item-with">
                            续费(元)
                        </div>
                        <div style="width: 50px;"></div>
                    </div>
                    <div class="detail-table-body">
                        <div class="menu-item">
                            <div class="express-table" v-for="(vo,index) in dataset.express">
                                <div class="custom-item-area"><!---->
                                    <div class="ellipsis-item-2 flex-1" style="width: 200px;">
                                        {{ vo.areas }}
                                    </div>
                                    <div @click="selectArea(index, vo)" class="edit-btn cursor-pointer">选择</div>
                                </div>
                                <div class="custom-item-with">
                                    <div class="el-input">
                                        <input type="text" style="width:80px;" v-model="vo.first_num"
                                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                               placeholder="">
                                    </div>
                                </div>
                                <div class="custom-item-with">
                                    <div class="el-input">
                                        <input type="text" style="width:80px;" v-model="vo.first_price"
                                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                               placeholder="">
                                    </div>
                                </div>
                                <div class="custom-item-with">
                                    <div class="el-input">
                                        <input type="text" style="width:80px;" v-model="vo.additional_num"
                                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                               placeholder="">
                                    </div>
                                </div>
                                <div class="custom-item-with">
                                    <div class="el-input">
                                        <input type="text" style="width:80px;" v-model="vo.additional_price"
                                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                               placeholder="">
                                    </div>
                                </div>
                                <div class="display-flex" style="width: 50px;">
                                    <div class="del-btn cursor-pointer" @click="remove(index)">删除</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <span @click="addExpress" class="l-btn l-btn-small color9 table"><span class="l-btn-text">添加配送区域</span></span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='store'">
            <td class="tlabel">配送范围：</td>
            <td>
                <el-radio-group v-model="all_store">
                    <el-radio :label="1">全部门店</el-radio>
                    <el-radio :label="0">部分门店</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='store' && all_store===0">
            <td class="tlabel">可配送门店：</td>
            <td>
                <label style="margin-right: 20px;" v-for="(vo,index) in store">
                    <input type="checkbox" name="dispatch_store" class="textbox-prompt"
                           v-model="store_checked" :value="vo.id" />{{vo.name}}</label>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='selfetch'">
            <td class="tlabel">有效时间：</td>
            <td>
                <el-radio-group v-model="dataset.selfetch.expire_type">
                    <el-radio label="day">有效天数</el-radio>
                    <el-radio label="time">截止日期</el-radio>
                </el-radio-group>
                <p style="color: #868585;"><span>有效天数：购买日起有效的天数;</span><span style="margin-left: 10px;">截止日期：截止使用日期</span></p>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='selfetch' && dataset.selfetch.expire_type == 'day' ">
            <td class="tlabel">有效天数：</td>
            <td>
                <el-input-number size="small" controls-position="right" v-model="dataset.selfetch.expire_day" :min="0" label="请输入有效天数"></el-input-number>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='selfetch' && dataset.selfetch.expire_type=='time'">
            <td class="tlabel">有效截止日期：</td>
            <td>
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                                v-model="dataset.selfetch.expire_time_text" default-time="23:59:59" type="datetime" placeholder="选择日期时间" popper-class="zindex_popper">
                </el-date-picker>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='selfetch'">
            <td class="tlabel">自提范围：</td>
            <td>
                <el-radio-group v-model="all_selfetch">
                    <el-radio :label="1">所有门店</el-radio>
                    <el-radio :label="0">部分门店</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='selfetch' && all_selfetch===0">
            <td class="tlabel">自提门店：</td>
            <td>
                <label style="margin-right: 10px;" v-for="(vo,index) in store">
                    <input type="checkbox" name="dispatch_selfetch" class="textbox-prompt" v-model="selfetch_checked" :value="vo.id" />{{vo.name}}
                </label>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF" v-if="dataset.type=='autosend'">
            <td class="tlabel">自动发货内容：</td>
            <td width="80%"><input type="text"
                                   class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                   placeholder="请输入自动发货内容.." v-model="dataset.autosend.content">
            </td>
        </tr>
    </table>
    <div id="areaDlg" class="easyui-dialog" style="width:500px; height:500px;" title="信息框" closed="true"></div>
</form>
<script>
    var dispatcheditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            dataset: JSON.parse('<?php echo addslashes($dataset);?>'),
            store: JSON.parse('<?php echo addslashes($store);?>'),
            all_store:1,
            all_selfetch:1,
            store_checked: [],
            selfetch_checked: [],
            express_type: '<?php echo $express_type;?>',
        },
        mounted(){
            this.init();
        },
        methods: {
            init(){
                if(this.dataset.id>0 && this.dataset.type==='store'){
                    if(this.dataset.store.store_ids !== ''){
                        this.all_store = 0;
                    }
                    this.store_checked = this.dataset.store.store_ids.split(',');
                }
                if(this.dataset.id>0 && this.dataset.type==='selfetch'){
                    if(this.dataset.selfetch.store_ids !== ''){
                        this.all_selfetch = 0;
                    }
                    this.selfetch_checked = this.dataset.selfetch.store_ids.split(',');
                }
            },
            selectArea(idx, vo) {
                $("#areaDlg").dialog({
                    title: '选择发货区域',
                    closed: false,
                    width: 500,
                    height: 500,
                    cache: false,
                    href: '/admin/dispatch/selectArea?index=' + idx + '&province_ids=' + vo.province_ids + '&city_ids=' + vo.city_ids + '&area_ids=' + vo.area_ids,
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'areasubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#areaDlg").dialog('close');
                        }
                    }]
                });
            },
            flushArea(idx, vo) {
                this.dataset.express[idx].areas = vo.areasName.join(',');
                this.dataset.express[idx].area_ids = vo.areaIds.join(',');
                this.dataset.express[idx].city_ids = vo.cityIds.join(',');
                this.dataset.express[idx].province_ids = vo.provIds.join(',');
            },
            addExpress() {
                this.dataset.express.push({
                    dispatch_id: 0,
                    type: this.express_type,
                    weigh: 0,
                    first_num: 0,
                    first_price: 0.00,
                    additional_num: 0,
                    additional_price: 0.00,
                    province_ids: '',
                    city_ids: '',
                    area_ids: '',
                    areas: '',
                });
            },
            remove(idx) {
                this.dataset.express.splice(idx, 1);
            },
            submit: function () {
                if(!dispatcheditVm.dataset.name){
                    $.messager.alert('提示', '模板名称不能为空', 'warning');
                    return;
                }
                if (dispatcheditVm.dataset.type === 'express') {
                    dispatcheditVm.dataset.express_type = dispatcheditVm.express_type;
                    for (let i in dispatcheditVm.dataset.express){
                        if(!dispatcheditVm.dataset.express[i].areas){
                            $.messager.alert('提示', '请选择可配送区域', 'warning');
                            return;
                        }
                    }
                }
                if (dispatcheditVm.dataset.type === 'store') {
                    if(dispatcheditVm.all_store === 0){
                        if(dispatcheditVm.store_checked.length === 0){
                            $.messager.alert('提示', '请选择配送门店', 'warning');
                            return;
                        }
                        dispatcheditVm.dataset.store.store_ids = dispatcheditVm.store_checked.join(',');
                    }else{
                        dispatcheditVm.dataset.store.store_ids = '';
                    }
                }
                if (dispatcheditVm.dataset.type === 'selfetch') {
                    if(dispatcheditVm.all_selfetch === 0) {
                        if (0 === dispatcheditVm.selfetch_checked.length) {
                            $.messager.alert('提示', '请选择自提门店', 'warning');
                            return;
                        }
                        dispatcheditVm.dataset.selfetch.store_ids = dispatcheditVm.selfetch_checked.join(',');
                    }else{
                        dispatcheditVm.dataset.selfetch.store_ids = '';
                    }
                    if(dispatcheditVm.dataset.selfetch.expire_type === 'day' && !dispatcheditVm.dataset.selfetch.expire_day){
                        $.messager.alert('提示', '有效天数没有填写', 'warning');
                        return;
                    }
                    if(dispatcheditVm.dataset.selfetch.expire_type === 'time' && !dispatcheditVm.dataset.selfetch.expire_time_text){
                        $.messager.alert('提示', '有效截止时间没有选择', 'warning');
                        return;
                    }
                }
                let act = this.dataset.id ? 'edit' : 'add';
                $.post('/admin/dispatch/' + act, dispatcheditVm.dataset, function (data) {
                    if (data.ret == 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#dispatchDlg").dialog('close');
                        switch (dispatcheditVm.dataset.type) {
                            case 'express':
                                dispatchReload1();
                                break;
                            case 'store':
                                dispatchReload2();
                                break;
                            case 'selfetch':
                                dispatchReload3();
                                break;
                            case 'autosend':
                                dispatchReload4();
                                break;
                        }
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                });
            }
        }
    });
    $('#dispatchsubmit').click(function (data) {
        dispatcheditVm.submit();
    })
</script>

<style>
    .detail-table {
        overflow-y: auto;
        color: #444;
        border: 1px solid #E6E6E6;
        border-bottom: none;
    }

    .detail-table-header {
        border-bottom: 1px solid #E6E6E6;
        display: flex;
        height: 32px;
        justify-content: space-around;
        align-items: center;
        padding-left: 18px;
        background: #F9F9F9;
    }

    .custom-item-with {
        width: 100px;
    }

    .express-table {
        display: flex;
        align-items: center;
        height: 59px;
        padding-left: 18px;
        border-bottom: 1px solid #E6E6E6;
    }

    .custom-item-area {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .flex-1 {
        flex: 1;
    }

    .ellipsis-item-2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .edit-btn {
        margin: 0 12px;
        color: #7438D5;
        cursor: pointer;
    }

    .el-input, .el-input .el-input__inner {
        height: 34px;
        line-height: 34px;
    }

    .forminput {
        border: #c0c4cc 1px solid;
    }

    .zindex_popper{
        z-index: 20000 !important;
    }
</style>